new Vue({
    el: "#app",
    data: function () {
        return {
            // 地图：0代表空白，1代表墙壁，2代表洞口
            map: [
                [0, 0, 1, 1, 1, 1, 0, 0],
                [0, 0, 1, 0, 0, 1, 1, 1],
                [1, 1, 1, 0, 2, 0, 0, 1],
                [1, 0, 0, 0, 0, 0, 0, 1],
                [1, 0, 0, 0, 1, 2, 0, 1],
                [1, 1, 1, 2, 0, 0, 1, 1],
                [0, 0, 1, 1, 1, 1, 1, 0],
            ],
            // 人所在的位置
            user: [3, 1],
            // 盒子所在的位置
            boxs: [
                [3, 2],
                [3, 3],
                [3, 4],
            ],
            originalUser: [3, 1],
            originalBoxs: [
                [3, 2],
                [3, 3],
                [3, 4],
            ],
            step: 0
        }
    },
    mounted() {
        window.addEventListener("keydown", (event) => {
            switch (event.code) {
                case 'ArrowUp': {
                    this.moveTo(-1, 0)
                    break;
                }
                case 'ArrowDown': {
                    this.moveTo(1, 0)
                    break;
                }
                case 'ArrowLeft': {
                    this.moveTo(0, -1)
                    break;
                }
                case 'ArrowRight': {
                    this.moveTo(0, 1)
                    break;
                }
            }
        })
    },
    methods: {
        // 判断当前位置是不是用户所在位置
        isUser(row, col) {
            return row === this.user[0] && col === this.user[1]
        },
        // 判断当前位置是不是箱子所在位置
        isBox(row, col) {
            return this.boxs.some(box => row === box[0] && col === box[1])
        },
        // 按下放向键后移动到位置
        moveTo(rowAdd, colAdd) {
            const [rowTo, colTo] = [this.user[0] + rowAdd, this.user[1] + colAdd]
            // 不能超过边界
            if (rowTo < 0 || rowTo >= this.map.length) return
            if (colTo < 0 || colTo >= this.map[0].length) return
            // 如果是墙壁无法移动
            if (this.map[rowTo][colTo] === 1) return
            // 如果是空白位置或者洞口可以移动（不包括箱子）
            if (this.map[rowTo][colTo] !== 1 && !this.isBox(rowTo, colTo)) {
                this.user = [rowTo, colTo]
                this.step++;
                this.checkPass()
                return
            }
            // 如果是箱子，并且后一个位置
            // 是空白位置或者洞口可以移动（不包括箱子）
            const [rowTo2, colTo2] = [rowTo + rowAdd, colTo + colAdd]
            if (this.isBox(rowTo, colTo) &&
                this.map[rowTo2][colTo2] !== 1 && !this.isBox(rowTo2, colTo2)) {
                const box = this.boxs.find(b => b[0] === rowTo && b[1] === colTo)
                box[0] = rowTo2
                box[1] = colTo2
                this.user = [rowTo, colTo]
                this.step++;
                this.checkPass()
                return
            }
        },
        // 检查过关，所有箱子所在的地方是洞口
        checkPass() {
            if (this.boxs.every(b => this.map[b[0]][b[1]] === 2)) {
                setTimeout(() => {
                    alert('过关')
                }, 10);
            }
        },
        // 重新开始游戏
        restart() {
            this.user = JSON.parse(JSON.stringify(this.originalUser))
            this.boxs = JSON.parse(JSON.stringify(this.originalBoxs))
            this.step = 0
        }

    }
})